<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!--公共资源文件-->
    <include file="Public:resource"/>

    <link href="__PUBLIC__/Css/mobiscroll_003.css" rel="stylesheet" type="text/css">
    <link href="__PUBLIC__/Css/mobiscroll_002.css" rel="stylesheet" type="text/css">
    <link href="__PUBLIC__/Css/mobiscroll.css" rel="stylesheet" type="text/css">

    <script src="__PUBLIC__/Js/mobiscroll_002.js" type="text/javascript"></script>
    <script src="__PUBLIC__/Js/mobiscroll_004.js" type="text/javascript"></script>
    <script src="__PUBLIC__/Js/mobiscroll.js" type="text/javascript"></script>
    <script src="__PUBLIC__/Js/mobiscroll_003.js" type="text/javascript"></script>
    <script src="__PUBLIC__/js/mobiscroll_005.js" type="text/javascript"></script>
    <title>停水查询</title>
</head>
<body>
<div class="container">
    <include file="Public:top" title="停水查询"/>

    <div class="row" style="margin-top: 20px;">
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 align-to-input" align="left">
            用户号
        </div>

        <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
            <input type="text" id="user-id" placeholder="请输入停水用户号">
        </div>
    </div>

    <div class="row" style="margin-top: 20px;">
        <div class="col-xs-12 col-sm-12 col-mg-12 col-md-12">
            <div><input type="button" class="btn btn-lg btn-block jss-button"
                        onclick="onSearch()" value="查询"/>
            </div>
        </div>
    </div>

    <div id="result-title" style="display: none">
        <include file="Public:bar" text="查询结果"/>
    </div>

    <div id="result-content" style="display: none">
        <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" align="center">
                用户号:
            </div>
            <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 c-gray" id="result-id">
            </div>
        </div>
        <div class="row" style="margin-top: 5px;">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" align="center">
                停水原因:
            </div>
            <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 c-gray" id="result-reason">
            </div>
        </div>
        <!--<div class="row" style="margin-top: 5px;">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 align-to-inputs" align="center">
                复水时间:
            </div>
            <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 c-gray">
                <input id="reuse-date" type="text" placeholder="请选择时间" required>
            </div>
        </div>-->
        <div class="row" style="margin-top: 5px;">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" align="center">
                复水原因:
            </div>
            <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 c-gray">
            <textarea name="reason" id="reason" style="width:100%;border: darkgray solid 1px;" rows="5" required
                      placeholder="请输入复水原因"></textarea>
            </div>
        </div>

        <div class="row" style="margin-top: 20px;">
            <div class="col-xs-12 col-sm-12 col-mg-12 col-md-12">
                <div><input type="button" class="btn btn-lg btn-block jss-button"
                            onclick="onReuse() " value="确定复水"/>
                </div>
            </div>
        </div>
    </div>
    <!--查找提示-->
    <div id="result-hint" style="display:none">
        <div class="row" style="font-size: large;margin-top: 50px;">
            <div class="col-xs-12 col-md-12 col-sm-12 col-lg-12 c-gray" align="center">
                <div id="hint"></div>
            </div>
        </div>
    </div>

    <include file="Public:progress" hint="请等待..."/>
    <include file="Public:message"/>
</div>
<script>
    //显示搜索结果提示
    function showResultHint(hint) {
        $("#hint").html(hint);
        $("#result-hint").css('display', '');
    }
    //显示搜索结果提示
    function hideResultHint() {
        $("#result-hint").css('display', 'none');
    }
    //显示查找结果内容
    function showResultContent(userid, reason) {
        //设置值
        $("#result-id").html(userid);
        $("#result-reason").html(reason);
        $("#result-content").css('display','');//显示
    }
    //隐藏查找结果内容
    function hideResultContent(){
        $("#result-content").css('display','none');//隐藏
    }
    //搜索停水记录
    function onSearch() {
        var userId = $("#user-id").val();
        if (userId == '') {
            alert("请输入停水用户号");
            return;
        }
        showProgress();
        $.ajax({
            type: 'post',
            dataType: 'json',
            data: {userId: userId},
            //async :false,
            url: "{:U('stopList')}",
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            success: function (json) {
                hideProgress();
                //alert(JSON.stringify(json));
                if (json.status == 'success') {
                    $("#result-title").css('display', '');//显示标题栏
                    if (json.data.data.list.length == 0) {
                        hideResultContent();
                        showResultHint("没找到用户号为'"+userId+"'的停水记录");
                    } else {
                        var count = 0;
                        $.each(json.data.data.list, function (index, item) {
                            hideResultHint();//隐藏提示
                            showResultContent(item.userid,item.typename);
                            count ++;
                            if(count == 1){
                                return false;//跳出循环
                            }
                        });
                    }
                } else {
                    alert(json.data.errmsg);
                }
            },
            error: function (msg) {
                hideProgress();
                alert("网络异常!");
            }
        });
    }

    //复水
    function onReuse(){
        showProgress();
        var param = {
            userId:$("#result-id").html(),
            reason: $("#reason").val()
        }
        $.ajax({
            type : 'post',
            dataType : 'json',
            data : param,
            async :false,
            url : "{:U('reuseRegister')}",
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            success:function(json){
                hideProgress();
                //alert(JSON.stringify(json));
                if(json.status == 'success'){
                    alert($("#result-id").html() + "用户复水登记成功!");
                    window.location.reload();
                } else {
                    alert(json.errmsg);
                }
            },
            error:function(msg){
                hideProgress();
                alert("网络异常!");
            }
        })
    }
</script>
</body>
</html>